<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Hexo, NexT" />





  <link rel="alternate" href="/atom.xml" title="OBKoro1's Blog" type="application/atom+xml" />




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.2" />






<meta name="description" content="前言：VuePress是尤大为了支持 Vue 及其子项目的文档需求而写的一个项目，VuePress界面十分简洁，并且非常容易上手，一个小时就可以将项目架构搭好。现在已经有很多这种类型的文档，如果你有写技术文档的项目的话，VuePress绝对可以成为你的备选项之一。">
<meta property="og:type" content="article">
<meta property="og:title" content="VuePress 手摸手教你搭建一个类Vue文档风格的技术文档&#x2F;博客">
<meta property="og:url" content="http://yoursite.com/2018/09/09/VuePress-手摸手教你搭建一个类Vue文档风格的技术文档-博客/index.html">
<meta property="og:site_name" content="OBKoro1&#39;s Blog">
<meta property="og:description" content="前言：VuePress是尤大为了支持 Vue 及其子项目的文档需求而写的一个项目，VuePress界面十分简洁，并且非常容易上手，一个小时就可以将项目架构搭好。现在已经有很多这种类型的文档，如果你有写技术文档的项目的话，VuePress绝对可以成为你的备选项之一。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://github.com/OBKoro1/articleImg_src/blob/master/weibo_img_move/005Y4rCogy1fv3fw5fctzj30hi0bnt8y.jpg?raw=true">
<meta property="og:image" content="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165b88bde5ddd420?w=3334&h=1740&f=jpeg&s=358566?raw=true">
<meta property="og:image" content="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165b88b39960911b?w=3328&h=1888&f=jpeg&s=434392?raw=true">
<meta property="og:image" content="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165bd71b0c38b87f?w=1246&h=346&f=jpeg&s=40945?raw=true">
<meta property="og:image" content="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165bd98ebe2f65b3?w=1740&h=746&f=png&s=139253?raw=true">
<meta property="og:image" content="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165bda20ddcbd209?w=1566&h=700&f=png&s=47920?raw=true">
<meta property="og:image" content="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165bdaa634c0839d?w=1604&h=506&f=png&s=33035?raw=true">
<meta property="og:updated_time" content="2019-07-20T06:55:39.067Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="VuePress 手摸手教你搭建一个类Vue文档风格的技术文档&#x2F;博客">
<meta name="twitter:description" content="前言：VuePress是尤大为了支持 Vue 及其子项目的文档需求而写的一个项目，VuePress界面十分简洁，并且非常容易上手，一个小时就可以将项目架构搭好。现在已经有很多这种类型的文档，如果你有写技术文档的项目的话，VuePress绝对可以成为你的备选项之一。">
<meta name="twitter:image" content="https://github.com/OBKoro1/articleImg_src/blob/master/weibo_img_move/005Y4rCogy1fv3fw5fctzj30hi0bnt8y.jpg?raw=true">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.2',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2018/09/09/VuePress-手摸手教你搭建一个类Vue文档风格的技术文档-博客/"/>





  <title>VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客 | OBKoro1's Blog</title>
  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?64d57d0b926bbd27431daa89d2e0a76b";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">OBKoro1's Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-前端算法">
          <a href="/arithmetic/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-book"></i> <br />
            
            前端算法
          </a>
        </li>
      
        
        <li class="menu-item menu-item-博客最新更新">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            博客最新更新
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-commonweal">
          <a href="/404/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-heartbeat"></i> <br />
            
            公益404
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/09/09/VuePress-手摸手教你搭建一个类Vue文档风格的技术文档-博客/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="OBKoro1">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/uploads/hand1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="OBKoro1's Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-09-09T17:53:00+08:00">
                2018-09-09
              </time>
            

            

            
          </span>

          

          
            
          

          
          
             <span id="/2018/09/09/VuePress-手摸手教你搭建一个类Vue文档风格的技术文档-博客/" class="leancloud_visitors" data-flag-title="VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">阅读次数&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  1,950 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  8分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p><img src="https://github.com/OBKoro1/articleImg_src/blob/master/weibo_img_move/005Y4rCogy1fv3fw5fctzj30hi0bnt8y.jpg?raw=true" alt=""></p>
<h2 id="前言："><a href="#前言：" class="headerlink" title="前言："></a>前言：</h2><p>VuePress是尤大为了支持 Vue 及其子项目的文档需求而写的一个项目，VuePress界面十分简洁，并且<strong>非常容易上手，一个小时就可以将项目架构搭好</strong>。现在已经有很多这种类型的文档，如果你有写技术文档的项目的话，VuePress绝对可以成为你的备选项之一。</p>
<a id="more"></a>
<h3 id="VuePress特性："><a href="#VuePress特性：" class="headerlink" title="VuePress特性："></a>VuePress特性：</h3><ul>
<li>为技术文档而优化的 内置 Markdown 拓展</li>
<li>在 Markdown 文件中使用 Vue 组件的能力</li>
<li>Vue 驱动的自定义主题系统</li>
<li>自动生成 Service Worker</li>
<li>Google Analytics 集成</li>
<li>基于 Git 的 “最后更新时间”</li>
<li>多语言支持</li>
<li>默认主题包含：</li>
</ul>
<p>建议先看一下<a href="https://vuepress.vuejs.org/zh/guide/" target="_blank" rel="noopener">官方文档</a></p>
<h3 id="效果："><a href="#效果：" class="headerlink" title="效果："></a>效果：</h3><p>可能你会搭建出一个类似这样的<a href="http://obkoro1.com/web_accumulate/" target="_blank" rel="noopener">文档</a>：</p>
<p><img src="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165b88bde5ddd420?w=3334&amp;h=1740&amp;f=jpeg&amp;s=358566?raw=true" alt=""></p>
<p><img src="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165b88b39960911b?w=3328&amp;h=1888&amp;f=jpeg&amp;s=434392?raw=true" alt=""></p>
<hr>
<h2 id="搭建："><a href="#搭建：" class="headerlink" title="搭建："></a>搭建：</h2><h3 id="全局安装VuePress"><a href="#全局安装VuePress" class="headerlink" title="全局安装VuePress"></a>全局安装VuePress</h3><pre><code>yarn global add vuepress # 或者：npm install -g vuepress
</code></pre><h3 id="新建文件夹"><a href="#新建文件夹" class="headerlink" title="新建文件夹"></a>新建文件夹</h3><p>可以手动右键新建，也可以使用下面的命令新建文件夹：</p>
<pre><code>mkdir project
</code></pre><h3 id="项目初始化"><a href="#项目初始化" class="headerlink" title="项目初始化"></a>项目初始化</h3><p>进入到<code>project</code>文件夹中，使用命令行初始化项目:</p>
<pre><code>yarn init -y # 或者 npm init -y
</code></pre><p>将会创建一个<code>package.json</code>文件，长这样子：</p>
<pre><code>{
  &quot;name&quot;: &quot;project&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;&quot;,
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;scripts&quot;: {
    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
  },
  &quot;keywords&quot;: [],
  &quot;author&quot;: &quot;&quot;,
  &quot;license&quot;: &quot;ISC&quot;
}
</code></pre><h3 id="在project的根目录下新建docs文件夹："><a href="#在project的根目录下新建docs文件夹：" class="headerlink" title="在project的根目录下新建docs文件夹："></a>在project的根目录下新建docs文件夹：</h3><p>这个文档将作为项目文档的根目录来使用：</p>
<pre><code>mkdir docs
</code></pre><h3 id="在docs文件夹下创建-vuepress文件夹："><a href="#在docs文件夹下创建-vuepress文件夹：" class="headerlink" title="在docs文件夹下创建.vuepress文件夹："></a>在docs文件夹下创建<code>.vuepress</code>文件夹：</h3><pre><code>mkdir .vuepress
</code></pre><p>所有 VuePress 相关的文件都将会被放在这里</p>
<h3 id="在-vuepress文件夹下面创建config-js"><a href="#在-vuepress文件夹下面创建config-js" class="headerlink" title="在.vuepress文件夹下面创建config.js:"></a>在<code>.vuepress</code>文件夹下面创建<code>config.js</code>:</h3><pre><code>touch config.js
</code></pre><p>config.js是VuePress必要的配置文件，它导出一个javascript对象。</p>
<p>你可以先加入如下配置：</p>
<pre><code>module.exports = {
  title: &apos;Hello VuePress&apos;,
  description: &apos;Just playing around&apos;
}
</code></pre><h3 id="在-vuepress文件夹下面创建public文件夹"><a href="#在-vuepress文件夹下面创建public文件夹" class="headerlink" title="在.vuepress文件夹下面创建public文件夹:"></a>在<code>.vuepress</code>文件夹下面创建public文件夹:</h3><pre><code>mkdir public
</code></pre><p>这个文件夹是用来放置静态资源的，打包出来之后会放在.vuepress/dist/的根目录。</p>
<h3 id="首页-像VuePress文档主页一样"><a href="#首页-像VuePress文档主页一样" class="headerlink" title="首页(像VuePress文档主页一样)"></a>首页(像VuePress文档主页一样)</h3><p>在docs文件夹下面创建一个<code>README.md</code>：</p>
<p>默认的主题提供了一个首页，像下面一样设置<code>home:true</code>即可，可以把下面的设置放入<code>README.md</code>中，待会儿你将会看到跟<code>VuePress</code>一样的主页。</p>
<pre><code>---
home: true
heroImage: /logo.jpg
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
</code></pre><p>ps：你需要放一张图片到public文件夹中。</p>
<h3 id="我们的项目结构已经搭好了："><a href="#我们的项目结构已经搭好了：" class="headerlink" title="我们的项目结构已经搭好了："></a>我们的项目结构已经搭好了：</h3><pre><code>project
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json
</code></pre><h3 id="在-package-json-里添加两个启动命令"><a href="#在-package-json-里添加两个启动命令" class="headerlink" title="在 package.json 里添加两个启动命令:"></a>在 <code>package.json</code> 里添加两个启动命令:</h3><pre><code>{
  &quot;scripts&quot;: {
    &quot;docs:dev&quot;: &quot;vuepress dev docs&quot;,
    &quot;docs:build&quot;: &quot;vuepress build docs&quot;
  }
}
</code></pre><h3 id="启动你的VuePress："><a href="#启动你的VuePress：" class="headerlink" title="启动你的VuePress："></a>启动你的VuePress：</h3><p>默认是<code>localhost:8080</code>端口。</p>
<pre><code>yarn docs:dev # 或者：npm run docs:dev
</code></pre><h3 id="构建："><a href="#构建：" class="headerlink" title="构建："></a>构建：</h3><p>build生成静态的HTML文件,默认会在 <code>.vuepress/dist</code> 文件夹下</p>
<pre><code>yarn docs:build # 或者：npm run docs:build
</code></pre><hr>
<h2 id="基本配置："><a href="#基本配置：" class="headerlink" title="基本配置："></a>基本配置：</h2><p>最标准的当然是<a href="https://vuepress.vuejs.org/zh/default-theme-config/" target="_blank" rel="noopener">官方文档</a>,可以自己的需求来配置<code>config.js</code>。</p>
<p>可以参考一下我的<code>config.js</code>的配置：</p>
<pre><code>module.exports = {
  title: &apos;网站标题&apos;,
  description: &apos;网站描述&apos;,
  // 注入到当前页面的 HTML &lt;head&gt; 中的标签
  head: [
    [&apos;link&apos;, { rel: &apos;icon&apos;, href: &apos;/favicon.ico&apos; }], // 增加一个自定义的 favicon(网页标签的图标)
  ],
  base: &apos;/web_accumulate/&apos;, // 这是部署到github相关的配置 下面会讲
  markdown: {
    lineNumbers: true // 代码块显示行号
  },
  themeConfig: {
    sidebarDepth: 2, // e&apos;b将同时提取markdown中h2 和 h3 标题，显示在侧边栏上。
    lastUpdated: &apos;Last Updated&apos; // 文档更新时间：每个文件git最后提交的时间
  }
};
</code></pre><h3 id="导航栏配置："><a href="#导航栏配置：" class="headerlink" title="导航栏配置："></a>导航栏配置：</h3><p><img src="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165bd71b0c38b87f?w=1246&amp;h=346&amp;f=jpeg&amp;s=40945?raw=true" alt=""></p>
<pre><code>module.exports = {
  themeConfig: {
    nav:[
      { text: &apos;前端算法&apos;, link: &apos;/algorithm/&apos; }, // 内部链接 以docs为根目录
      { text: &apos;博客&apos;, link: &apos;http://obkoro1.com/&apos; }, // 外部链接
      // 下拉列表
      {
        text: &apos;GitHub&apos;,
        items: [
          { text: &apos;GitHub地址&apos;, link: &apos;https://github.com/OBKoro1&apos; },
          {
            text: &apos;算法仓库&apos;,
            link: &apos;https://github.com/OBKoro1/Brush_algorithm&apos;
          }
        ]
      }        
    ]
  }
}
</code></pre><h3 id="侧边栏配置："><a href="#侧边栏配置：" class="headerlink" title="侧边栏配置："></a>侧边栏配置：</h3><p>侧边栏的配置相对麻烦点，我里面都做了详细的注释，仔细看，自己鼓捣鼓捣 就知道怎么搞了。</p>
<pre><code>module.exports = {
  themeConfig: {
      sidebar:{
        // docs文件夹下面的accumulate文件夹 文档中md文件 书写的位置(命名随意)
        &apos;/accumulate/&apos;: [
            &apos;/accumulate/&apos;, // accumulate文件夹的README.md 不是下拉框形式
            {
              title: &apos;侧边栏下拉框的标题1&apos;,
              children: [
                &apos;/accumulate/JS/test&apos;, // 以docs为根目录来查找文件 
                // 上面地址查找的是：docs&gt;accumulate&gt;JS&gt;test.md 文件
                // 自动加.md 每个子选项的标题 是该md文件中的第一个h1/h2/h3标题
              ]
            }
          ],
          // docs文件夹下面的algorithm文件夹 这是第二组侧边栏 跟第一组侧边栏没关系
          &apos;/algorithm/&apos;: [
            &apos;/algorithm/&apos;, 
            {
              title: &apos;第二组侧边栏下拉框的标题1&apos;,
              children: [
                &apos;/algorithm/simple/test&apos; 
              ]
            }
          ]
      }
  }
}
</code></pre><hr>
<h2 id="其他："><a href="#其他：" class="headerlink" title="其他："></a>其他：</h2><h3 id="代码块编译错误："><a href="#代码块编译错误：" class="headerlink" title="代码块编译错误："></a>代码块编译错误：</h3><p>像下面这段代码会导致编译错误，VuePress会去找里面的变量，把它编译成text：</p>
<pre><code>{{}} 啦 {{}}
</code></pre><p>所以我们的代码块要以这种形式书写：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//```js</span></span><br><span class="line">&#123;&#123;&#125;&#125; 啦 &#123;&#123;&#125;&#125; <span class="comment">// 注释需要打开 这样vuepress会把这里面包裹的当成代码块而不是js</span></span><br><span class="line"><span class="comment">//</span></span><br></pre></td></tr></table></figure>
<p><code>`</code></p>
<p>并且这样也会让我们的代码高亮显示(下图第一个没有高亮，第二个有高亮)，阅读体验更好：</p>
<p><img src="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165bd98ebe2f65b3?w=1740&amp;h=746&amp;f=png&amp;s=139253?raw=true" alt=""></p>
<h3 id="自定义容器了解一下："><a href="#自定义容器了解一下：" class="headerlink" title="自定义容器了解一下："></a>自定义容器了解一下：</h3><p><img src="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165bda20ddcbd209?w=1566&amp;h=700&amp;f=png&amp;s=47920?raw=true" alt=""></p>
<p><strong>更改标题：</strong></p>
<pre><code>::: tip 替换tip的标题
这里是内容。
:::
</code></pre><p>其实<a href="https://vuepress.vuejs.org/zh/guide/markdown.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AE%B9%E5%99%A8" target="_blank" rel="noopener">文档</a>里有，我这里只是提一下。</p>
<h3 id="支持Emoji"><a href="#支持Emoji" class="headerlink" title="支持Emoji"></a>支持Emoji</h3><p><img src="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/165bdaa634c0839d?w=1604&amp;h=506&amp;f=png&amp;s=33035?raw=true" alt=""></p>
<p>文档中只提了支持Emoji,我在GitHub上找到了Emoji的<a href="https://gist.github.com/rxaviers/7360908" target="_blank" rel="noopener">列表</a>，分享一下。</p>
<h2 id="一个命令行发布到github上："><a href="#一个命令行发布到github上：" class="headerlink" title="一个命令行发布到github上："></a>一个命令行发布到github上：</h2><h3 id="在-docs-vuepress-config-js-中设置正确的-base"><a href="#在-docs-vuepress-config-js-中设置正确的-base" class="headerlink" title="在 docs/.vuepress/config.js 中设置正确的 base:"></a>在 <code>docs/.vuepress/config.js</code> 中设置正确的 base:</h3><p>如果你打算发布到 <code>https://&lt;USERNAME&gt;.github.io/</code>，则可以省略这一步，因为 base 默认即是 <code>&quot;/&quot;</code>。</p>
<p>如果你打算发布到 <code>https://&lt;USERNAME&gt;.github.io/&lt;REPO&gt;/</code>（也就是说你的仓库在 <code>https://github.com/&lt;USERNAME&gt;/&lt;REPO&gt;</code>），则将 base 设置为 <code>&quot;/&lt;REPO&gt;/&quot;</code>。</p>
<pre><code>module.exports = {
  base: &apos;/test/&apos;, // 比如你的仓库是test
}
</code></pre><h3 id="创建脚步文件"><a href="#创建脚步文件" class="headerlink" title="创建脚步文件:"></a>创建脚步文件:</h3><p>在<code>project</code>的根目录下，创建一个<code>deploy.sh</code>文件：</p>
<pre><code>#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo &apos;www.example.com&apos; &gt; CNAME

git init
git add -A
git commit -m &apos;deploy&apos;

# 如果发布到 https://&lt;USERNAME&gt;.github.io  USERNAME=你的用户名 
# git push -f git@github.com:&lt;USERNAME&gt;/&lt;USERNAME&gt;.github.io.git master

# 如果发布到 https://&lt;USERNAME&gt;.github.io/&lt;REPO&gt;  REPO=github上的项目
# git push -f git@github.com:&lt;USERNAME&gt;/&lt;REPO&gt;.git master:gh-pages

cd -
</code></pre><h3 id="设置package-json："><a href="#设置package-json：" class="headerlink" title="设置package.json："></a>设置package.json：</h3><pre><code>{
  &quot;scripts&quot;: {
    &quot;d&quot;: &quot;bash deploy.sh&quot;
  }
}
</code></pre><h3 id="部署："><a href="#部署：" class="headerlink" title="部署："></a>部署：</h3><p>然后你每次可以运行下面的命令行，来把最新更改推到<code>github</code>上：</p>
<pre><code>npm run d
</code></pre><p>如果你对运行项目和构建项目的命令行觉得很烦，你也可以像我这么做：</p>
<pre><code>&quot;scripts&quot;: {
    &quot;dev&quot;: &quot;vuepress dev docs&quot;, // 本地运行项目 npm run dev
    &quot;build&quot;: &quot;vuepress build docs&quot;, // 构建项目 nom run build
    &quot;d&quot;: &quot;bash deploy.sh&quot; // 部署项目 npm run d
  },
</code></pre><hr>
<h2 id="更多："><a href="#更多：" class="headerlink" title="更多："></a>更多：</h2><p>实际上VuePress的配置、用法还有很多，像还可以配置PWA，以及在markdown里面使用Vue组件等，这些功能我也还在摸索，所以大家一定要去看<a href="https://vuepress.vuejs.org/zh/" target="_blank" rel="noopener">文档</a>!</p>
<h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2><p>上面已经写得尽可能详细了，我遇到的坑都写上去了。搭建起来确实很简单，心动不如行动，随手花一两个小时搭建一下又不吃亏，何乐而不为？</p>
<h3 id="希望看完的朋友可以点个喜欢-关注，您的支持是对我最大的鼓励。"><a href="#希望看完的朋友可以点个喜欢-关注，您的支持是对我最大的鼓励。" class="headerlink" title="希望看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。"></a>希望看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。</h3><p><strong><a href="http://obkoro1.com/" target="_blank" rel="noopener">个人blog</a></strong> and <strong><a href="http://obkoro1.com/web_accumulate/" target="_blank" rel="noopener">前端积累文档</a></strong>，如需转载，请放上原文链接并署名。码字不易，<strong>感谢</strong>支持！</p>
<p>如果喜欢本文的话，欢迎扫描关注我的<a href="https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/1631b6f52f7e7015.jpeg?raw=true" target="_blank" rel="noopener">订阅号</a>，最新文章，面试题等都将第一时间发布在订阅号上。</p>
<p> 以上2018.9.9</p>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>听说，打赏我的人最后都找到了真爱。</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/pay/weixin.jpg" alt="OBKoro1 微信支付"/>
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/pay/ali.jpg" alt="OBKoro1 支付宝"/>
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2018/08/23/算法-反转整数/" rel="next" title="算法-反转整数">
                <i class="fa fa-chevron-left"></i> 算法-反转整数
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2018/09/12/算法-入门两篇-水仙花数-反转一个3位整数/" rel="prev" title="算法(入门)_水仙花数&反转一个3位整数">
                算法(入门)_水仙花数&反转一个3位整数 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          
            <img class="site-author-image" itemprop="image"
              src="/uploads/hand1.jpg"
              alt="OBKoro1" />
          
            <p class="site-author-name" itemprop="name">OBKoro1</p>
            <p class="site-description motion-element" itemprop="description">种一棵树最好的时间是十年前,其次是现在</p>
        </div>

        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
            
              <a href="/archives">
            
                <span class="site-state-item-count">105</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/categories/index.html">
                <span class="site-state-item-count">20</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/tags/index.html">
                <span class="site-state-item-count">74</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/atom.xml" rel="alternate">
              <i class="fa fa-rss"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/OBKoro1" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>GitHub</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://juejin.im/user/58714f0eb123db4a2eb95372" target="_blank" title="掘金">
                  
                    <i class="fa fa-fw fa-globe"></i>掘金</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://obkoro1.com/web_accumulate/" target="_blank" title="前端积累">
                  
                    <i class="fa fa-fw fa-globe"></i>前端积累</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://segmentfault.com/u/obkoro1/articles" target="_blank" title="segmentfault">
                  
                    <i class="fa fa-fw fa-globe"></i>segmentfault</a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#前言："><span class="nav-number">1.</span> <span class="nav-text">前言：</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#VuePress特性："><span class="nav-number">1.1.</span> <span class="nav-text">VuePress特性：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#效果："><span class="nav-number">1.2.</span> <span class="nav-text">效果：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#搭建："><span class="nav-number">2.</span> <span class="nav-text">搭建：</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#全局安装VuePress"><span class="nav-number">2.1.</span> <span class="nav-text">全局安装VuePress</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#新建文件夹"><span class="nav-number">2.2.</span> <span class="nav-text">新建文件夹</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#项目初始化"><span class="nav-number">2.3.</span> <span class="nav-text">项目初始化</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在project的根目录下新建docs文件夹："><span class="nav-number">2.4.</span> <span class="nav-text">在project的根目录下新建docs文件夹：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在docs文件夹下创建-vuepress文件夹："><span class="nav-number">2.5.</span> <span class="nav-text">在docs文件夹下创建.vuepress文件夹：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-vuepress文件夹下面创建config-js"><span class="nav-number">2.6.</span> <span class="nav-text">在.vuepress文件夹下面创建config.js:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-vuepress文件夹下面创建public文件夹"><span class="nav-number">2.7.</span> <span class="nav-text">在.vuepress文件夹下面创建public文件夹:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#首页-像VuePress文档主页一样"><span class="nav-number">2.8.</span> <span class="nav-text">首页(像VuePress文档主页一样)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#我们的项目结构已经搭好了："><span class="nav-number">2.9.</span> <span class="nav-text">我们的项目结构已经搭好了：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-package-json-里添加两个启动命令"><span class="nav-number">2.10.</span> <span class="nav-text">在 package.json 里添加两个启动命令:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#启动你的VuePress："><span class="nav-number">2.11.</span> <span class="nav-text">启动你的VuePress：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#构建："><span class="nav-number">2.12.</span> <span class="nav-text">构建：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#基本配置："><span class="nav-number">3.</span> <span class="nav-text">基本配置：</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#导航栏配置："><span class="nav-number">3.1.</span> <span class="nav-text">导航栏配置：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#侧边栏配置："><span class="nav-number">3.2.</span> <span class="nav-text">侧边栏配置：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#其他："><span class="nav-number">4.</span> <span class="nav-text">其他：</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#代码块编译错误："><span class="nav-number">4.1.</span> <span class="nav-text">代码块编译错误：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#自定义容器了解一下："><span class="nav-number">4.2.</span> <span class="nav-text">自定义容器了解一下：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#支持Emoji"><span class="nav-number">4.3.</span> <span class="nav-text">支持Emoji</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#一个命令行发布到github上："><span class="nav-number">5.</span> <span class="nav-text">一个命令行发布到github上：</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#在-docs-vuepress-config-js-中设置正确的-base"><span class="nav-number">5.1.</span> <span class="nav-text">在 docs/.vuepress/config.js 中设置正确的 base:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#创建脚步文件"><span class="nav-number">5.2.</span> <span class="nav-text">创建脚步文件:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#设置package-json："><span class="nav-number">5.3.</span> <span class="nav-text">设置package.json：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#部署："><span class="nav-number">5.4.</span> <span class="nav-text">部署：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#更多："><span class="nav-number">6.</span> <span class="nav-text">更多：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#结语"><span class="nav-number">7.</span> <span class="nav-text">结语</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#希望看完的朋友可以点个喜欢-关注，您的支持是对我最大的鼓励。"><span class="nav-number">7.1.</span> <span class="nav-text">希望看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2017 &mdash; 
  <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">OBKoro1</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">
      156.0k
    </span>
  
</div>




<div>
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span class="site-uv"><i class="fa fa-user"></i> 访问用户： <span class="busuanzi-value" id="busuanzi_value_site_uv">21621</span> 人 </span>
<span class="site-pv"><i class="fa fa-eye"></i> 访问次数： <span class="busuanzi-value" id="busuanzi_value_site_pv">68503</span> 次</span>

</div>



        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

  
  <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.2"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.2"></script>



  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script>


  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.2"></script>



  


  




	





  





  








  



  





  

  
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
  <script>AV.initialize("9ANFp60h6oVyxIPGlau3NOA4-gzGzoHsz", "tMdNuKMbFtN4QsekeNVu83TV");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>



  

  

  

  

  

</body>
</html>

